<template>
  <view>
    <view class="uni-padding-wrap">
      <view class="page-section swiper">
        <view class="page-section-spacing">
          <swiper class="swiper" @change="changefun" @animationfinish="animationfinishfun" :current="index_"
                  :vertical="true">
            <swiper-item v-for="(item,index) in videoList">
              <view class="swiper-item" @click.stop="playPause(index)">
                <image src="https://xxxxxxxxxxxxxx.com/2021083111362225433.png" v-if="!isPlay" class="btn play">
                </image>
                <image src="https://xxxxxxxxxxxxxx.com/2021083111373735978.png" v-if="isPlay&&firstclick"
                       class="btn pause"></image>
                <video
                    :custom-cache="false"
                    loop="true"
                    class="video"
                    :id="'id'+index"
                    :duration="item.duration"
                    :enable-progress-gesture="true"
                    :controls="false"
                    @timeupdate="(e)=>videoUpdate(e,item,index)"
                    :src="item.vlogUrl"
                    :show-center-play-btn="false">
                </video>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <tab-bar></tab-bar>
    </view>
    <view v-if="is_active">
      <view class="left">
        <view class="left_box">
          <!--   #ifdef MP-ALIPAY   -->
          <view>
            <!--   #endif  -->
            <view class="slider">
              <slider v-model="activeObj.currentTime" @change="sliderChange" @changing="sliderChanging"
                      :activeColor="!isPlay || !updateState ?'#ffffff':'#ffffff4D'"
                      :block-size="!isPlay || !updateState?14:12" :block-color="!isPlay|| !updateState?'#ffffff':'#6e6f71'"
                      backgroundColor="#4f5253"></slider>
            </view>
          </view>
        </view>
      </view>

    </view>
</template>

<script>
import tabBar from "../../../components/tabBar/tabBar";
export default {
  components: {
    tabBar
  },
  data() {
    return {
      videoList: [],
      index_: null,
      index: '0',
      firstclick: false,
      is_active: true,
      isPlay: true,
      activeObj: null,
      sending: false,
      contentId: '',
      updateState: true,
      videoContext: null,
    }
  },
  onLoad(option) {
    // 此接口用来查第一个视频详细信息
    // this.$uniApi.dataRequestNoLoading('GET', 'base/app/v1/contentApp/getDefaultVlogId').then(res => {
    // 我在此处替换为假数据
    let res = {
      "code": 1,
      "data": {
        "id": "1806517903331479553",
        "title": "一日游",
        "subtitle": null,
        "coverImage": "https://xxxxxxxxxxxxxx.com/171954161525350063.jpg", // 请更换为自己的视频
        "readingSum": "239",
        "rankingInclude": null,
        "includeContain": null,
        "vlogUrl": "https://xxxxxxxxxxxxxx.com/2024062810390955101.mp4", // 请更换为自己的图片
        "type": 9,
        "salesNum": null,
        "marketPrice": null,
        "coverImageHeight": 702,
        "coverImageWeight": 1080,
        "headImgUrl": "https://xxxxxxxxxxxxxx.com/171954159983539103.png", // 请更换为自己的图片
        "author": "一日游",
        "isTopping": "0"
      },
      "msg": "成功",
      "success": true
    }
    let id = res.data.id || ""
    this.contentId = id
    let obj = Object.assign({}, {
      id: id
    })
    obj['istrue'] = false
    obj['contentId'] = id
    obj['currentTime'] = 0
    //  用来计算滚动条
    obj['duration'] = 0
    // 视频链接
    obj['vlogUrl'] = res.data.vlogUrl
    //
    this.videoList.push(obj)
    // 查找视频列表   我的接口是根据当前的视频 id 去查后面的视频
    // 一次查的太多会导致卡顿
    this.oprateVideoList(this.contentId)
    // 初始化第一个视频 并播放
    this.$nextTick(function() {
      let videoContext = uni.createVideoContext(`id0`)
      videoContext.play()
    })
    // })

  },
  watch: {
    index_(val) {
      this.videoContext = uni.createVideoContext(`id${this.index_}`)
      this.contentId = this.videoList[val]['contentId']
    },
    activeObj(val, oldval) {
      if (!oldval) {
        this.$nextTick(function() {
          let videoContext = uni.createVideoContext(`id${this.index_}`)
          videoContext.play()
        })
      }
    }
  },
  methods: {
    // current 改变时会触发 change 事件，event.detail = {current: current, source: source}
    // 暂停当前的视频播放
    changefun(e) {
      this.is_active = false
      let videoContext = uni.createVideoContext('id' + this.index_)
      videoContext.pause()
    },
    playPause(current) {
      // 点击视频时  如果播放就暂停 如果是暂停就开始播放
      let videoContext = uni.createVideoContext('id' + current)
      this.firstclick = true
      if (this.isPlay) {
        videoContext.pause()
        this.isPlay = false
      } else {
        videoContext.play()
        this.isPlay = true
      }
    },
    // 	动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}
    animationfinishfun(e) {
      let that = this
      this.isPlay = true
      // 获取下标
      let current = e.detail.current
      this.activeObj = this.videoList[current]
      this.index_ = current
      this.is_active = true
      this.videoList[current]['istrue'] = true
      // 获取当前的 video 标签 并暂停播放
      let videoContext = uni.createVideoContext('id' + this.index_)
      videoContext.pause()
      // 初始化新的video 并播放
      videoContext = uni.createVideoContext('id' + current)
      videoContext.play()
      //  视频滑到最后一个 就再去请求新的 视频列表
      if (this.videoList.length > 0 && current + 1 == this.videoList.length && !this.sending) {
        this.oprateVideoList(this.videoList[current]['contentId'])
      }
    },

    videoUpdate(e, item, index) {
      // 此处用来计算进度条
      if (this.updateState) {
        // #ifdef MP-WEIXIN
        if (e.target.id == 'id' + index) {
          this.videoList[this.index_]['currentTime'] = e.detail.currentTime / e.detail.duration * 100
          this.videoList[this.index_]['duration'] = e.detail.duration
        }
        // #endif
        // #ifdef MP-ALIPAY
        this.videoList[this.index_]['currentTime'] = e.detail.currentTime / e.detail.videoDuration * 100
        this.videoList[this.index_]['duration'] = e.detail.videoDuration
        // #endif
      }
    },
    // 拖动过程中触发的事件，event.detail = {value: value}
    sliderChanging(e) {
      this.updateState = false
    },
    //拖动进度条触发事件
    sliderChange(e) {
      let duration = this.videoList[this.index_]['duration']
      if (duration) {
        this.videoContext.seek(e.detail.value / 100 * duration); //完成拖动后，计算对应时间并跳转到指定位置
        this.videoList[this.index_]['duration'] = e.detail.value
        this.updateState = true
      }
    },
    // 获取视频列表
    oprateVideoList(id) {
      let that = this
      this.sending = true
      // this.$uniApi.dataRequestNoLoading('GET', 'base/app/v1/contentVlog/getVlogListByContentId', {
      // 	contentId: id,
      // }).then(resp => {

      let resp = {
        "code": 1,
        "data": [{
          "contentId": "1606207777364082690",
          "title": "vlog啊",
          "coverImage": "https://xxxxxxxxxxxxxx.com/167178470537619117.png",
          "vlogUrl": "https://xxxxxxxxxxxxxx.com/2022122316383441583.mp4"
        }, {
          "contentId": "1684011338528985090",
          "title": "vlog",
          "coverImage": "https://xxxxxxxxxxxxxx.com/169033454163171300.png",
          "vlogUrl": "https://xxxxxxxxxxxxxx.com/2023072609222991294.mp4"
        }, {
          "contentId": "1678315077972848642",
          "title": "阿达啊",
          "coverImage": "https://xxxxxxxxxxxxxx.com/168897636035107597.png",
          "vlogUrl": "https://xxxxxxxxxxxxxx.com/2023071016074361328.mp4"
        }],
        "msg": "成功",
        "success": true
      }

      resp.data.map(res => {
        res['istrue'] = false
        res['currentTime'] = 0
        res['duration'] = 0
        // return res
      })
      if (that.index_ === null) {
        that.index_ = 0
      }
      that.videoList = that.videoList.concat(resp.data)
      that.activeObj = that.videoList[that.index_]
      that.sending = false
      that.videoList[0]['istrue'] = true
      // })

    }
  },

}
</script>
<style>
page {
  background: #000;
}
</style>
<style scoped lang="scss">
.circle {
  background: rgba(34, 34, 34, 0.4);
  border-radius: 50%;
  z-index: 2;
  height: 70px;
  width: 70px;
  position: fixed;
  top: 0;

  bottom: 441rpx;
  left: 31rpx;

  margin: auto;

  .red {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 3;
    height: 35px;
    width: 35px;
  }
}

.swiper {
  height: 100vh;

  .slider {
    height: 20rpx;
    position: absolute;
    bottom: 67rpx;
    left: 0;
    width: 750rpx;

    slider {
      margin: 0;
    }
  }

  .swiper-item {
    height: 100vh;
    position: relative;


    .btn {
      position: absolute;
      width: 120rpx;
      height: 120rpx;
      background: none;
      z-index: 2;
      top: 50%;
      margin-top: -60rpx;
      left: 50%;
      margin-left: -60rpx;

      &.pause {
        animation: benone .2s 2s linear forwards;
      }
    }

  }
}

.video {
  width: 100%;
  height: 100vh;
  position: relative;

}

.left_box {
  position: fixed;
  bottom: 55px;
  left: 0rpx;
  width: 100%;
  height: 600rpx;
  pointer-events: none;
  z-index: 8;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));

  .slider {
    pointer-events: initial;
    height: 20rpx;
    position: absolute;
    bottom: 67rpx;
    left: 0;
    width: 750rpx;

    slider {
      margin: 0;
    }
  }





  ::v-deep .u-icon {
    position: fixed;
    right: 40rpx;
    bottom: 280rpx;
    pointer-events: initial;
    z-index: 10;
  }
}




@keyframes benone {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.uni-padding-wrap {
  background-color: #ffffff;
}
</style>
